<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/head :: head(links)"/>
<body>
<div class="ok-body" id="app" v-cloak>
    <template>
        <i-form label-colon ref="checkForm" :model="entity" :rules="ruleValidate" :label-width="120">
            <i-row>
                <i-col span="12">
                    <form-item prop="orgName" label="请选择单位">
                        <span @click="selectOrg()">
                            <i-input readonly  v-model="entity.orgName" placeholder="请选择单位"></i-input>
                        </span>
                    </form-item>
                </i-col>
                <i-col span="12">
                    <form-item prop="parkManageName" label="请选择停车场">
                        <span @click="selectPark()">
                            <i-input readonly  v-model="entity.parkManageName" placeholder="请选择停车场"></i-input>
                        </span>
                    </form-item>
                </i-col>
            </i-row>
            <i-row>
                <i-col span="12">
                    <form-item prop="nickname" label="车主姓名">
                        <i-input  v-model="entity.nickname" placeholder="请输入车主姓名"></i-input>
                    </form-item>
                </i-col>
                <i-col span="12">
                    <form-item prop="mobile" label="手机号">
                        <i-input  v-model="entity.mobile" placeholder="请输入手机号"></i-input>
                    </form-item>
                </i-col>
            </i-row>
            <i-row>
                <i-col span="12">
                    <form-item prop="gender" label="性别">
                        <radio-group  v-model="entity.gender">
                            <radio v-for="item in genderList" :label="item.value" :key="item.value">{{item.label}}</radio>
                        </radio-group>
                    </form-item>
                </i-col>
                <i-col span="12">
                    <form-item prop="plateNumber" label="车牌号">
                        <i-input  v-model="entity.plateNumber" placeholder="请输入车牌号"></i-input>
                    </form-item>
                </i-col>
            </i-row>

            <i-row>
                <i-col span="12">
                    <form-item prop="parkingLot" label="车位号">
                        <i-input v-model="entity.parkingLot" placeholder="请输入车位号"></i-input>
                    </form-item>
                </i-col>
                <i-col span="12">
                    <form-item prop="type" label="类型">
                        <radio-group  v-model="entity.type">
                            <radio v-for="item in typeList" :label="item.value" :key="item.value">{{item.label}}</radio>
                        </radio-group>
                    </form-item>
                </i-col>
            </i-row>
            <i-row>
                <i-col span="12">
                    <form-item prop="validityTime" label="有效期至">
                        <Date-Picker  v-model="entity.validityTime" type="datetime" format="yyyy-MM-dd" placeholder="有效期至" style="width: 200px"></Date-Picker>
                    </form-item>
                </i-col>
                <i-col span="12">
                    <form-item prop="status" label="状态">
                        <radio-group  v-model="entity.status">
                            <radio v-for="item in statusList" :label="item.value" :key="item.value">{{item.label}}</radio>
                        </radio-group>
                    </form-item>
                </i-col>
            </i-row>
        </i-form>
    </template>
</div>
<div th:replace="common/foot :: foot(script)"></div>
<script th:inline="none">
var vm = new Vue({
    el: '#app',
    data:{
        entity:{
            status:1,
            orgName:'',
            orgId:null,
            parkManageId:null,
            parkManageName:''
        },
        roleName:"",
        typeList:[{"label":"包月车","value":0},{"label":"VIP免费车","value":1}],
        genderList:[{"label":"男","value":"1"},{"label":"女","value":"0"}],
        statusList:[{"label":"正常","value":1},{"label":"禁用","value":0}],
        ruleValidate : {
			orgName: [
				{ required: true, message: '不能为空', trigger: 'change' }
			],
			parkManageName: [
				{ required: true, message: '不能为空', trigger: 'change'}
			],
			nickname: [
				{ required: true, message: '不能为空', trigger: 'blur'}
			],
			mobile: [
				{ required: true, message: '不能为空', trigger: 'blur'}
			],
			gender: [
				{ required: true, message: '不能为空', trigger: 'blur'}
			],
			parkingLot: [
				{ required: true, message: '不能为空', trigger: 'blur'}
			],
			plateNumber: [
				{ required: true, message: '不能为空', trigger: 'blur'}
			],
			type: [
				{ required: true, message: '不能为空', trigger: 'change',type: 'number' }
			],
			status: [
				{ required: true, message: '不能为空', trigger: 'change',type: 'number'  }
			],
			validityTime: [
				{ required: true, message: '不能为空', trigger: 'change',type: 'date' }
			],
		},
		okUtils:null,
		okLayer:null
    },
    methods: {
        load : function(){
            layui.use(["okUtils", "okLayer"], function () {
                 vm.okUtils = layui.okUtils;
                 vm.okLayer = layui.okLayer;
                 if(vm.entity.id!=undefined){
                     vm.okUtils.ajaxCloud({
                        url:"/car/manage/get",
                        param : {id:vm.entity.id},
                        close : false,
                        success : function(result) {
                            vm.entity = result.msg;
                        }
                     });
                 }
            });
	    },
        acceptClick : function(dialog){
          vm.$refs.checkForm.validate(function(valid){
            if (valid) {
                 vm.okUtils.ajaxCloud({
                    url:"/car/manage/save",
                    param : vm.entity,
                    json:true,
                    success : function(result) {
                        vm.okLayer.msg.greenTick(result.msg)
                        dialog.load();
                    }
                 });
            }
          });
	    },
	    selectOrg : function(){
            vm.okUtils.dialogOpen({
                title: '选择合作单位',
                id:'org',
                url: "car/carManage/org.html",
                scroll : true,
                width: '300px',
                height: '500px',
                success : function(dialog) {

                },
                yes : function(dialog) {
                    dialog.vm.acceptClick(vm);
                }
            });
	    },
	    selectPark : function(){
            vm.okUtils.dialogOpen({
                title: '选择停车场',
                id:'org',
                url: "car/carManage/park.html",
                scroll : true,
                width: '300px',
                height: '500px',
                success : function(dialog) {

                },
                yes : function(dialog) {
                    dialog.vm.acceptClick(vm);
                }
            });
	    }
    },
    created: function() {

    }
});
</script>
</body>
</html>